//地址页面
import React from 'react'
//引入样式文件
import '../../../asset/css/home/adress/adress.css'
//引入插件
import { NavBar, Icon } from 'antd-mobile';

//创建组件
class Adress extends React.Component {
    constructor(){
        super()
        this.state={
            val:'',
        }
    }
    //受控组件
    handle=(e)=>{
      this.setState({
          val:e.target.value
      })
    }
    render() {
        //调用父组件的方法
        let {getAdress}=this.props;
        // console.log(this.props)
        getAdress(this.state.val)

        return (
            <div className='adrerss'>
                {/*头部*/}
                <div className="adress_header">
                    {/*标题栏*/}
                    <div className="adress_title">
                        <NavBar
                            mode="dark"
                            icon={<Icon type="left" />}
                            onLeftClick={() => this.props.history.goBack()}
                            rightContent='新增地址'
                        ><div>选择收货地址</div></NavBar>
                    </div>

                    {/*搜索框*/}
                    <div className='adress_search'>
                        <div className='adress_aria'>
                            <span>南京</span>
                            <img src={require('../../../asset/icon/icon_sanjiaoxing.png')} alt="" />
                        </div>

                        <div className='adress_ipt'>
                           <img src={require('../../../asset/css/home/img/sousuo.png')} alt="" className='ipt_log'/>
                           <input type="text" name="" id="" placeholder='请输入地址' className="adressIpt" onChange={this.handle.bind(this)} value={this.state.val}/>
                        </div>

                    </div>

                </div>
                {/*主体*/}
                <div className="adress_contain">
                    {/*显示搜索出来的地址列表*/}
                    
                </div>
            </div>
        )
    }
}
//暴露出去
export default Adress 